﻿<html>
<head>
<title>Google Maps API</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- :: CSS - Page Layout :: -->
<link href="css/common.css" rel="stylesheet" type="text/css" />
<!-- :: JS - JQuery :: -->
<script type="text/javascript"
	src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- :: JS - Google Maps API :: -->
<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- :: JS - GMaps Functions :: -->
<script type="text/javascript" src="js/js-gmaps-functions.js"></script>
<script type="text/javascript" language="javascript">
	$(function() {
		//Inicializa o mapa
		CarregarMapa();
	});
</script>
</head>
<body>

	<h:outputStylesheet library="css" name="default.css" />

	<div class="limitar">
		<div id="wrapper">
			<!--Valores pré-definidos para o mapa-->
			<input id="hdnLatitude" runat="server" type="hidden"
				value="-8.035434" /> <input id="hdnLongitude" runat="server"
				type="hidden" value="-34.881699" />
			<div>
				<div class="box_left">
					<label> Endereço:</label> <input type="text" id="txtEndereco"
						value="Recife - PE" size="54" />
					<!--Botao busca o mapa pelo endereço-->
					<a class="button" href="javascript:CarregarPeloEndereco();"
						title="Carregar a partir do endereço"> <img
						src="img/search.png" alt="Buscar" />
					</a>
					<div class="box_middle">
						<label> Latitude:</label> <input type="text" id="txtLatitude"
							value="-23.292757" />
					</div>
					<div class="box_middle">
						<label> Longitude:</label> <input type="text" id="txtLongitude"
							value="-51.169424" />
						<!--Botao busca o mapa pela localização (Latitude e Longitude)-->
						<a class="button" href="javascript:CarregarMapa();"
							title="Carregar a partir da longitude e latitude"> <img
							src="img/search.png" alt="Buscar" />
						</a>
					</div>
					<div>
						<label> Adicionar mais 1 localização <!--Botao adiciona uma nova localização no mapa-->
							<a class="button" href="javascript:AdicionarLocalizacao();">
								<img src="img/add.png" alt="Add" />
						</a>
						</label>
					</div>
				</div>
				<div class="box_right">
					<label> Onde estou ?</label> <input type="text" id="ondeestou"
						size="36" /> <label> Como chegar?</label> <input type="text"
						id="ondechegar" size="36" />

					<!--Botao criar rota-->
					<a href="javascript:CriarRota();" title="Traçar Rota"
						class="button"> <img src="img/go.png" alt="Ir" />
					</a> <br /> <span style="font-size: 8pt; color: #999;">Ex: Rua
						Numero, Cidade, Estado</span> <br /> <br />
					<!--Botao imprimir-->
					<a href="javascript:Imprimir();" class="button"> <img
						src="img/print.png" alt="Imprimir" /><span>Imprimir rota</span>
					</a>
				</div>
			</div>
			<div>
				<div class="box_left">
					<!--Div que armazenará o mapa-->
					<div id="gmap"></div>
				</div>
				<div class="box_right">
					<!--Div que armazenará a descrição da rota-->
					<div id="rota_gmap"></div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
